<template>
	<!-- //其实我不是很懂为什么这边的view隐藏掉就可以显示信息，不隐藏就无法显示信息 -->
	<!-- <view> -->
	<!-- change事件就是监听所有组件事件的改变，比如输入框啊，选择框啊等等的都可以 -->
	<swiper class="home-swiper" :current="activeList" @change="change">
		<swiper-item class="swiper-item" v-for="(item,key) in tab">
			<listItem :list="article"></listItem>
		</swiper-item>
	</swiper>
	<!-- </view> -->
</template>

<script>
	import listItem from '../list-item/list-item.vue';
	export default {
		components: {
			listItem
		},
		//接收数值，这个值就是最外层index里面传进来的，
		props: {
			tab: {
				type: Array,
				default () {
					return []
				}
			},
			activeList: {
				type: Number,
				default: 0,
			},
		},
		name: "list",
		data() {
			return {
				article: [],
			}
		},
		//onload只能在页面里面写，不能再组件里面写onload
		//组件里面用created
		created() {
			this.getArticles();
		},
		methods: {
			change(e) {
				//这里的change，就是我们自己定义的事件名字，发送到调用页面的可以被识别
				this.$emit('mchange', e.detail)
			},

			getArticles() {
				uni.request({
					url: 'http://localhost:8000/api/testpost',
					method: 'POST',
					data: {
						class_id: 1,
					},
					success: (res) => {
						this.article = res.data;
						// console.log(res.data);
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	.home-swiper {
		height: 100%;

		.swiper-item {
			height: 100%;
			overflow: hidden;
		}
	}
</style>